<template>
	<view class="page-balance p12">


		<view class="bg-white p10 u-flex module-tab" style="box-shadow: 0px 4px 10px 0px rgba(230,219,209,0.25);">
			<view class="u-f1 item fz12 c6" :class="curTab==0?'on':''" @click="toTab(0)">线索奖励(<span
					class="fz14">{{xsTotal.count}}</span>)</view>
			<view class="u-f1 item fz12 c6" :class="curTab==1?'on':''" @click="toTab(1)">佣金奖励(<span
					class="fz14">{{yjTotal.count}}</span>)</view>
			<view class="u-f1 item fz12 c6" :class="curTab==2?'on':''" @click="toTab(2)">租金收益(<span
					class="fz14">{{zjTotal.count}}</span>)</view>
			<view class="u-f1 item fz12 c6" :class="curTab==3?'on':''" @click="toTab(3)">业务提成(<span
					class="fz14">{{ywTotal.count}}</span>)</view>
		</view>
		<view class="p15 mt15 u-flex u-f-jsb" style="background: #FAEFEF;
box-shadow: 0px 4px 12px 0px rgba(194,178,166,0.1);
border-radius: 0px 0px 0px 0px;
border: 1px solid rgba(242,70,70,0.2);color:#F24646">
			<span>{{typeAttr[curTab]}}</span>
			<span>
				<span v-if="curTab==0">{{xsTotal.amount}}</span>
				<span v-if="curTab==1">{{yjTotal.amount}}</span>
				<span v-if="curTab==2">{{zjTotal.amount}}</span>
				<span v-if="curTab==3">{{ywTotal.amount}}</span>
				元</span>
		</view>
		<view class="p15 u-flex u-f-jsb">
			<view class="u-flex">
			
			<view class="w80" @click="showDate=true ">{{year}}<u-icon class="fz12 ml5" name="arrow-down" color="#666"></u-icon></view>
			<view @click="showDate1=true ">{{month}}<u-icon class="fz12 ml5" name="arrow-down" color="#666"></u-icon></view>
			</view>
			<view>本月收益：{{monthTotal.amount}}元</view>
		</view>
		<view class="bg-white p12" style="box-shadow: 0px 4px 10px 0px rgba(230,219,209,0.25);">

			<view v-for="(item,index) in dataList" :key="index">
				<view v-if="curTab==0" class="bg-white mb15 p15"
					style="box-shadow: 0px 8px 20px 0px rgba(230,219,209,0.25);">
					<view class="fz14 u-f-jsb u-flex bm pb15 mb8">状态<span
							class="status fz12">{{item.isApproved?'已发放':'未发放'}}</span>
					</view>
					<view class="fz13 u-f-jsb u-flex pt8 pb8">
						线索名称<span class="">{{item.categoryName}}</span>
					</view>

					<view class="fz13 u-f-jsb u-flex pt8 pb8">
						线索价值<span class="">{{item.clueAmount}}</span>
					</view>
					<view class="fz13 u-f-jsb u-flex pt8 pb8">
						奖励比例<span class="">{{item.rewardRatio}}%</span>
					</view>
					<view class="fz13 u-f-jsb u-flex pt8 pb8">
						奖励金额<span class="">￥{{item.propertyValue}}</span>
					</view>
					<view class="fz13 u-f-jsb u-flex pt8 pb8">
						日期<span class="">{{item.createTimeFormat}}</span>
					</view>

				</view>

				<view v-if="curTab==1" class="bg-white mb15 p15"
					style="box-shadow: 0px 8px 20px 0px rgba(230,219,209,0.25);">
					<view class="fz14 u-f-jsb u-flex bm pb15 mb8">状态<span
							class="status fz12">{{item.isApproved?'已发放':'未发放'}}</span>
					</view>
					<view class="fz13 u-f-jsb u-flex pt8 pb8">
						投资人姓名<span class="">{{item.investorName}}</span>
					</view>

					<view class="fz13 u-f-jsb u-flex pt8 pb8">
						投资房源名称<span class="">{{item.propertyName}}</span>
					</view>
					<view class="fz13 u-f-jsb u-flex pt8 pb8">
						投资金额<span class="">{{item.investmentAmount}}</span>
					</view>
					<view class="fz13 u-f-jsb u-flex pt8 pb8">
						佣金金额<span class="">￥{{item.rewardAmount}}</span>
					</view>
					<view class="fz13 u-f-jsb u-flex pt8 pb8">
						日期<span class="">{{item.createTimeFormat}}</span>
					</view>

				</view>

				<view v-if="curTab==2" class="bg-white mb15 p15"
					style="box-shadow: 0px 8px 20px 0px rgba(230,219,209,0.25);">
					<view class="fz14 u-f-jsb u-flex bm pb15 mb8">收租日期<span
							class="status fz12">{{item.rentCollectionDateFormat}}</span>
					</view>
					<view class="fz13 u-f-jsb u-flex pt8 pb8">
						房源名称<span class="">{{item.propertyName}}</span>
					</view>
					<view class="fz13 u-f-jsb u-flex pt8 pb8">
						业务类型<span class="">{{item.bizTypeDesc}}</span>
					</view>
					<view class="fz13 u-f-jsb u-flex pt8 pb8">
						收租类型<span class="">{{item.rentCollectionTypeName}}</span>
					</view>


					<view class="fz13 u-f-jsb u-flex pt8 pb8">
						租金金额<span class="">￥{{item.rent}}</span>
					</view>
					<view class="fz13 u-f-jsb u-flex pt8 pb8">
						实收金额<span class="">￥{{item.paidUpRent}}</span>
					</view>
					<view class="fz13 u-f-jsb u-flex pt8 pb8">
						收益比例<span class="">{{item.ratio}}%</span>
					</view>
					<view class="fz13 u-f-jsb u-flex pt8 pb8">
						收益金额<span class="">￥{{item.amount}}</span>
					</view>
					<view class="fz13 u-f-jsb u-flex pt8 pb8">
						审核日期<span class="">{{item.approvalTimeFormat}}</span>
					</view>

				</view>

				<view v-if="curTab==3" class="bg-white mb15 p15"
					style="box-shadow: 0px 8px 20px 0px rgba(230,219,209,0.25);">
					<view class="fz14 u-f-jsb u-flex bm pb15 mb8">收租日期<span
							class="status fz12">{{item.rentCollectionDateFormat}}</span>
					</view>
					<view class="fz13 u-f-jsb u-flex pt8 pb8">
						房源名称<span class="">{{item.propertyName}}</span>
					</view>

					<view class="fz13 u-f-jsb u-flex pt8 pb8">
						收租类型<span class="">{{item.rentCollectionTypeName}}</span>
					</view>
					<view class="fz13 u-f-jsb u-flex pt8 pb8">
						租金金额<span class="">{{item.rent}}</span>
					</view>
					<view class="fz13 u-f-jsb u-flex pt8 pb8">
						实收金额<span class="">￥{{item.paidUpRent}}</span>
					</view>
					<view class="fz13 u-f-jsb u-flex pt8 pb8">
						提成比例<span class="">{{item.ratio}}%</span>
					</view>
					<view class="fz13 u-f-jsb u-flex pt8 pb8">
						提成金额<span class="">￥{{item.amount}}</span>
					</view>
					<view class="fz13 u-f-jsb u-flex pt8 pb8">
						审核日期<span class="">{{item.approvalTimeFormat}}</span>
					</view>

				</view>
			</view>

			<view class="">

				<u-loadmore :status="loadStatus" v-if="dataList.length>0" />
			</view>
			<view class="order-none u-flex u-f-justify fz16 c9 p50" v-if="dataList.length<=0">
				暂无数据！
			</view>
		</view>
		<u-picker mode="time" v-model="showDate" :params="params" @confirm="dateConfirm"></u-picker>
		<u-picker mode="time" v-model="showDate1" :params="params1" @confirm="dateConfirm1"></u-picker>
	</view>
</template>

<script>
	import {
		getPlatform
	} from '@/config/util.js'
	export default {
		data() {
			return {
				params: {
					year: true,
					month: false,
					day: false,
					hour: false,
					minute: false,
					second: false
				},
				params1: {
					year: false,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
				},
				year:'',
				month:'',
				showDate: false,
				showDate1: false,
				current: 0,
				dataList: [],
				userInfo: {},
				loadStatus: 'more',
				scrollHeight: 300,
				page: 1,
				info: {},
				curDate: '',
				typeAttr: ['线索奖励', '佣金奖励', '租金收益', '业务提成'],
				xsTotal: {},
				yjTotal: {},
				ywTotal: {},
				zjTotal: {},
				monthTotal:{},
				curTab: 0
			};
		},
		methods: {
			dateConfirm(e) {
				this.year = e.year
				this.initData()
			},
			dateConfirm1(e) {
				this.month = e.month
				this.initData()
			},
			toTab(e) {
				this.curTab = e
				this.initData()
			},

			initData() {
				this.page = 1
				this.dataList = []
				this.getData()

			},
			getData() {
				let post = {
					pageNo: this.page,
					type: this.curTab,
					year:this.year,
					month:this.month,
					pageSize: 20
				}
				let api = 'xsList'
				let api1 = 'xsTotal'
				if (this.curTab == 0) {
					api = 'xsList'
					api1 = 'xsTotal'
				}
				if (this.curTab == 1) {
					api = 'yjList'
					api1 = 'yjTotal'
				}
				if (this.curTab == 2) {
					api = 'zjList'
					api1 = 'zjTotal'
				}
				if (this.curTab == 3) {
					api = 'ywList'
					api1 = 'ywTotal'
				}
				this.$api[api](post, res => {
					if (res.code == 200) {
						let _list = res.data.list
						this.dataList = [...this.dataList, ..._list]
						// 判断所有数据是否请求完毕
						if (res.data.total > this.dataList.length) {
							this.page++
							this.loadStatus = 'more'
						} else {
							this.loadStatus = 'noMore'
						}
					}
				})
				
				
				this.$api[api1](post, res => {
					if (res.code == 200) {
						
							this.monthTotal = res.data
					}
				})
			},
			getInfo() {



				this.$api.xsTotal({}, (res) => {
					if (res.code == 200) {
						this.xsTotal = res.data
					}
				})
				this.$api.yjTotal({}, (res) => {
					if (res.code == 200) {
						this.yjTotal = res.data
					}
				})
				this.$api.ywTotal({}, (res) => {
					if (res.code == 200) {
						this.ywTotal = res.data
					}
				})
				this.$api.zjTotal({}, (res) => {
					if (res.code == 200) {
						this.zjTotal = res.data
					}
				})
			},
			toPage(url) {
				uni.navigateTo({
					url
				})
			},

		},
		// 页面下拉到底部触发
		onReachBottom() {
			if (this.loadStatus == 'more') {
				this.getData()
			}
		},
		onLoad(e) {

			let currentDate = new Date();
			let month = new Date().getMonth() + 1
			this.year = currentDate.getFullYear(); // 获取当前年份
			this.month =(month<=9?('0'+month):month)
			if (this.$db.get("userToken")) {

				if (e.type) {

					this.curTab = e.type
				}
				this.getInfo()
				this.initData()
			}
		}
	};
</script>

<style lang="scss">
	.btn {
		background: rgba(242, 70, 70, 0.1);
		color: #F24646;

		height: 86upx;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.module-card {
		position: relative;

		.card-content {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
		}
	}

	.btn-ti {
		color: #F7684C;
		padding: 14rpx 40rpx;
		background: #fff;
		box-shadow: 0px 8px 16px 0px #F7684C;
	}

	.module-tab {
		text-align: center;

		.item {
			padding: 10rpx;

			&.on {
				background: #F24646;
				color: #fff;
			}
		}
	}
</style>